<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>小众文件共享</title>
  <link rel="shortcut icon" href="/favicon.png" type="image/x-icon"> 
	<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
	<link rel="stylesheet" href="/bower_components/fakeLoader/fakeLoader.css" />
	<link rel="stylesheet" href="/css/app.css" />
	<script src="/bower_components/jquery/dist/jquery.min.js"></script>
	<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="/bower_components/fakeLoader/fakeLoader.min.js"></script>
	<script src="/bower_components/dropzone/dist/min/dropzone.min.js"></script>
</head>
<body>
  <div id="fakeLoader"></div>
	<div class="container">
		<div class="drop-zone">
			<h3>Drop File Here</h3>
		</div>
    <footer class="text-center"><a href="http://www.minmore.com">太原小众科技</a></footer>
	</div>
	<script>
$(function(){
  var loadMask = function() {
    $('#fakeLoader').fakeLoader({
      zIndex: "999",
      timeToHide: 999999999,
      spinner: "spinner6",
      bgColor: "#00ced1"
    })
  }

  var parseResponse = function(r) {
    var r = $.parseJSON(r)
    if(r.r == 1){
      if(r.redirect){
        window.location = '/' + r.ukey
      }else{
        alert("文件略大，暂不跳转 /"+r.ukey)
      }
    }else{
      alert("未知错误!")
    } 
  }

  $('body').on('paste', function(e){
    var items = e.originalEvent.clipboardData.items,
        file = items[0]
    
    var xhr = new XMLHttpRequest(),
        formData = new FormData()
    formData.append('file', file.getAsFile())
    xhr.onload = function() {
      parseResponse(xhr.response)
    }
    loadMask()
    xhr.open('post', '/file/upload')
    xhr.send(formData)
  })

	$('.drop-zone').on('click', function(e){
		e.stopPropagation()
		e.preventDefault()
		$('input[type=file]').trigger('click')
	})
	$('.drop-zone').dropzone({
		url: '/file/upload',
    addedfile: loadMask,
		complete: function(file){
      parseResponse(file.xhr.response)
		}
	})
})
	</script>
</body>
</html>
